import React, { Component } from 'react'
import { withRouter, useHistory } from 'react-router-dom'
import PropTypes from 'prop-types'
import emitter from '@/Evt.js'
import { getArticleList } from '@/api/common'
const ReactMarkdown = require('react-markdown')
import './css/article.less'

class Content extends Component {
	state = {
		// 标签按钮
		btnStatus: false, //按钮状态
		btnIcon: 'down',
		btnText: '打开标签',
		// 二级标签
		list: [],
	}

    // 类似于vue的mount钩子
	componentDidMount() {
		getArticleList({
			userName: 'longwei',
			flag: 'all',
		}).then(
			(res) => {
				this.setState({
					list: res,
				})
			},
			(error) => {}
		)
	}

    // 进入文章详情
	toDetail(item,index) {
        
		
        // this.props.history.push({ pathname : '/article' ,query : { nextPre: nextPre} })
        this.props.history.push({ pathname : '/article'})
	}

	render() {
		return (
			<div className="content-article">
				{this.state.list.map((item, index) => (
					// show ? <div v-if="showTips" class="ad-tips content-left ad-content-left">
					// 该分类下暂无数据，您可以查看其它分类
					// </div>:
					<div
						className="article-box"
						key={index}
						onClick={this.toDetail.bind(this, item, index)}
					>
						<div className="article-left">
							<a className="page-img">
								<img
									src={item.coverImage}
									alt="内容无法展示..."
								/>
							</a>
						</div>
						<div className="article-right">
							<div className="article-text">
								<div className="article-title">
									<a>{item.title}</a>
								</div>
								<div className="list-text">
									<ReactMarkdown
										className="content-page"
										source={item.content}
									/>
								</div>
								<div className="list-meta">
									<i className="page-top bg-danger">
										{item.tag}
									</i>
									<span className="float-left mr-small">
										{item.autor}
									</span>
									{item.times}
								</div>
							</div>
						</div>
					</div>
				))}
			</div>
		)
	}
}

export default withRouter(Content)
